<template>
  <div class="med-container">
    <div class="med-item">
      <p>Entry: {{ entry_id }}</p>
      <p>Subject: {{ entry.interaction.subject }}</p>

      <MessageForm
        v-bind:permission="permissions.addMessage && !readonly"
      ></MessageForm>

      <ClearHolds
        v-bind:permission="permissions.clear && !readonly"
        v-bind:state="holds"
      ></ClearHolds>

      <Reassign
        v-bind:assignTo="assignTo"
        v-bind:permission="permissions.reassign && !readonly"
      ></Reassign>

      <Resolve
        v-bind:permission="permissions.resolve && !readonly"
        v-bind:state="state"
      ></Resolve>

      <FinishAppointment
        v-bind:permission="permissions.finish"
        v-bind:unfinished="unfinished && !readonly"
      ></FinishAppointment>
    </div>
    <div class="med-item">
      <Messages v-bind:messages="messages"></Messages>
    </div>
    <br class="med-last" />
  </div>
</template>

<script>
import ClearHolds from "@/components/ClearHolds.vue";
import FinishAppointment from "@/components/FinishAppointment.vue";
import MessageForm from "@/components/MessageForm.vue";
import Messages from "@/components/Messages.vue";
import Reassign from "@/components/Reassign.vue";
import Resolve from "@/components/Resolve.vue";

export default {
  name: "Entry",
  components: {
    ClearHolds,
    FinishAppointment,
    MessageForm,
    Messages,
    Reassign,
    Resolve
  },
  props: [
    "assignTo",
    "entry",
    "entry_id",
    "holds",
    "id",
    "messages",
    "permissions",
    "readonly",
    "state",
    "unfinished"
  ]
};
</script>

<style scoped>
.med-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.med-item {
  min-width: 300px;
  width: 48%;
  margin-bottom: 2%;
}

.med-last {
  width: 2%;
  margin-bottom: 2%;
}

.med-item + .med-item {
  margin-left: 2%;
}
</style>
